<template>
  <aside class="site-sidebar " :class="'site-sidebar--' + sidebarLayoutSkin">
<!--    <div class="main-sidebar-search-bar">
      <el-select v-model="menuUrl" clearable filterable placeholder="请选择" @change="openUrl">
        <el-option
          v-for="item in selectMenus"
          :key="item.param"
          :label="item.name"
          :value="item.param">
        </el-option>
      </el-select>
    </div>-->
    <div class="site-sidebar__inner">
      <LMenu
        ref="menu"
        :default-active="(menuActiveName.split('&'))[1] || 'home'"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu">
        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu>
      </LMenu>
    </div>
  </aside>
</template>

<script>
  import SubMenu from './main-sidebar-sub-menu'
  import { Menu as LMenu } from '../../../../lib'
  import { isURL } from '@/utils/validate'
  import * as dd from 'dingtalk-jsapi'
  export default {
    data () {
      return {
        dynamicMenuRoutes: [],
        selectMenus: [],
        menuUrl: ''
      }
    },
    components: {
      SubMenu,
      LMenu
    },
    computed: {
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      menuList: {
        get () { return this.$store.state.common.menuList },
        set (val) { this.$store.commit('common/updateMenuList', val) }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      }
    },
    watch: {
      $route: 'routeHandle'
    },
    async created () {
      this.menuList = await this.$httpN.get('mpb/system/menus');
      this.menuList.forEach((item) => {
        this.getChildMenu(item)
      })

      this.$nextTick(() => {
        this.$refs.menu.open(this.menuList[0].menuId);
      })
    },
    methods: {
      getChildMenu(item) {
        if(item.url.indexOf('?')) {
          this.selectMenus.push({
            name: item.name,
            param: item.name + '|' + item.url + '|' + item.menuId
          });
        }
        if(item.list.length > 0) {
          item.list.forEach((menu) => {
            this.getChildMenu(menu)
          })
        }
      },
      openUrl(param) {
        if(param) {
          let paramArr = param.split('|')
          let path = 'n' + paramArr[1].replace('/', '-');
          this.$router.push({path: path, query: { tabName: paramArr[0], menuId: paramArr[2]}})
        }
      },
      // 路由操作
      routeHandle (route) {
        if (route.meta.isTab) {
          let menuid = route.query.menuId;
          let tabName = route.query.tabName;
          var tab = this.mainTabs.filter(item => item.name === (route.name + '&' + menuid))[0]

          if (!tab) {
            tab = {
              menuId: menuid,
              name: route.name + '&' + menuid,
              title: tabName,
              type: 'module',
              iframeUrl: '',
              query: route.query,
              params: route.params
            }
            this.mainTabs = this.mainTabs.concat(tab)
          }
          this.menuActiveName = tab.menuId + ''
          this.mainTabsActiveName = tab.name
        }
      }
    }
  }
</script>
<style lang="scss">
  .main-sidebar-search-bar{
    padding: 15px 0;
    text-align: center;
    .el-input--medium .el-input__inner{
      background:#F1F4F5;
      border-color: #F1F4F5;

    }
  }
</style>
